<template>
<div id="root">
  <h2>欢迎来到{{name}}学习</h2>
<!--  组织默认事件-->
  <a href="http:www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
<!--  阻止事件冒泡-->
  <div class="demo1" @click="showInfo">
    <button @click.stop="showInfo">点我提示信息</button>
  </div>
<!--  事件只触发一次-->
  <button @click.once="showInfo">点我提示信息</button>
<!--  使用事件的捕获模式-->
  <div class="box1" @click.capture="showMsg(1)">
    div1
    <div class="box2" @click="showMsg(2)">
      div2
    </div>
  </div>
<!--  只有event.target是当前操作的元素才触发事件-->
  <div class="demo1" @click.self="showInfo">
    <button @click="showInfo">点我提示信息</button>
  </div>

  <ul @wheel.passive="demo" class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
</template>

<script>
export default {
  name: "ShiJianXiuShiFu",
  data() {
    return {
      name: '清华大学'
    }
  },
  methods: {
    showInfo(e) {
      alert('同学你好！')
    },
    showMsg(msg) {
      console.log(msg)
    },
    demo() {
      for (let i =0; i< 100000; i++) {
        console.log('#')
      }
      console.log('累坏了')
    }
  }
}
</script>

<style scoped>
*{
  margin-top: 20px;
}
.demo1{
  height: 50px;
  background-color: skyblue;
}
.box1{
  padding: 5px;
  background-color: skyblue;
}
.box2{
  padding: 5px;
  background-color: orange;
}
.list{
  width: 200px;
  height: 200px;
  background-color: peru;
  overflow: auto;
}
li{
  height: 100px;
}
</style>
